<template>
  <div>
    <div class="navs"></div>
    <div class="nav" :class="bgc">
        <div class="nav1" @click="toHOme">
            <img src="https://gw.alicdn.com/imgextra/i1/O1CN01FY0a921FVNZRTEGvQ_!!6000000000492-2-tps-42-76.png_.webp?getAvatar=avatar" alt="">
        </div>
        <div class="box1" v-show="boolen1">
            <img src="https://gw.alicdn.com/imgextra/i3/O1CN01c32hZ21zj5p1FtRqc_!!6000000006749-2-tps-255-80.png_150x10000.jpg_.webp" alt="">
            <img src="https://gw.alicdn.com/imgextra/i2/O1CN01pjao4R1DULWdDLOIc_!!6000000000219-2-tps-314-76.png_.webp" alt="">
        </div>
        <div class="box2" v-show="boolen2" @click="tosearch">
            <img src="https://gw.alicdn.com/imgextra/i1/O1CN01hKQdjv29Rp07p6Cqc_!!6000000008065-2-tps-58-60.png_110x10000.jpg_.webp?getAvatar=avatar"
                alt="">
            <span>大玩具</span>
        </div>
    </div>
    <div class="search"  @click="tosearch">
        <div>
            <img src="https://gw.alicdn.com/imgextra/i1/O1CN01hKQdjv29Rp07p6Cqc_!!6000000008065-2-tps-58-60.png_110x10000.jpg_.webp?getAvatar=avatar"
                alt="">
            <span>大玩具</span>
        </div>
   
        <span>搜索</span>
    </div>

    <img class="bgc" src="https://gw.alicdn.com/imgextra/i1/O1CN01AEzB8N21MJOBbfP3x_!!6000000006970-0-tps-1125-1950.jpg_790x10000Q75.jpg_.webp"
                alt="">
  </div>
</template>

<script>

export default {
    data(){
        return{

        }
    },
    props:["bgc","boolen1","boolen2"],
    methods:{
        toHOme(){
            this.$router.push("/")
        },
        tosearch(){
            this.$router.push("/mysearch")
        }
    }
}
</script>

<style scoped>
.navs{
        width: 100%;
        height: .88rem;
    }
.nav {
    width: 100%;
    height: .88rem;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 100;
}
.navnew{
background-color: #f84271; 
}
.nav .nav1{
    width: 40px;
    height: 100%;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav .nav1 img{
    width: 10.5px;
    height: 19px;
}

.nav .box1{
    flex: 1;
    display: flex;
    align-items: center;
}
.box2{
    width: 210px;
    height: 30px;
    display: flex;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
}
.box2 img{
    width: 15px;
    height: 15px;
    margin-left: 15px;
}
.box2 span{
    font-size: 13px;
    margin: 0 10px 0 7px;
    color: #fff;
}
.nav .box1 img:nth-child(1){
    width: 74px;
    height: 19px;
}
.nav .box1 img:nth-child(2) {
    width: 78.5px;
    height: 19px;
    margin-left: 10px;
}

.search{
    width: 90%;
    height: 30px;
    margin: 0 5%;
    border-radius: 15px;
    position: relative;
    z-index: 100;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: space-between;
}
.search div{
    flex: 1;
    display: flex;
    align-items: center;
}
.search div span{
    font-size: 13px;
    color: #fff;
    margin: 0 10px 0 7px;
}

.search  div img{
    width: 15px;
    height: 15px;
    margin-left: 15px;
    vertical-align: middle;
}


.bgc{
    width: 100%;
    height: 460px;
    position: absolute;
    top:-100px;
    pointer-events: none;
}
.search>span {
    width: 54px;
    height: 24px;
    margin: 3px 3px ;
    border-radius: 12px;
    font-size: 13px;
    color: #EE1851;
    text-align: center;
    line-height: 24px;
    background: #fff;
}
</style>